<template>
	<view class="meeting-container">
		<view class="meeting-card" v-for="(meeting,index) in list" :key="index" @click="linkTo(index)">
			<view class="meeting-icon">
				<u-icon name="calendar-fill" color="rgba(255,255,255,.8)" size="56"></u-icon>
			</view>
			<view class="meeting-message">
				<h1>{{meeting.meetingname}}</h1>
				<view class="people">
					<p>主讲人：{{meeting.meetingpeople}}</p>
					<p>参与：{{meeting.meetingjionpnum}}人</p>
				</view>
				<p>培训地点：{{meeting.meetingaddress}}</p>
				<p>开始时间：{{meeting.meetingbegintime}}</p>
			</view>
		</view>
	</view>
</template>

<script>
	import resources from '@/libs/resources.js'
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		getDictionaryDataSelector,
		getDataInterfaceRes
	} from '@/api/common'
	import request from '@/utils/request'
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				sortValue: '',
				searchForm: {
					meetingname: undefined,
					meetingpeople: undefined,
					meetingaddress: undefined,
					meetingjionpnum: undefined,
					meetingbeginday: undefined,
					meetingbegintime: undefined,
					meetingendtime: undefined,
				},
				downOption: {
					use: true,
					auto: false
				},
				upOption: {
					page: {
						num: 0,
						size: 20,
						time: null,
					},
					empty: {
						use: true,
						icon: resources.message.nodata,
						tip: "暂无数据",
						fixed: true,
						top: "300rpx",
						zIndex: 5,
					},
					textNoMore: '没有更多数据',
					toTop: {
						bottom: 250
					}
				},
				list: [
					{
						meetingname:"生产安全特种作业考试",
						meetingpeople:"贾大涛",
						meetingjionpnum:"23",
						meetingaddress:"会议大厅1",
						meetingbegintime:"2022-10-09 15:00:00"
					},
					{
						meetingname:"生产安全特种作业考试",
						meetingpeople:"贾大涛",
						meetingjionpnum:"23",
						meetingaddress:"会议大厅1",
						meetingbegintime:"2022-10-09 15:00:00"
					},
				],
				listQuery: {
					sort: 'desc',
					sidx: '',
					keyword: '',
					json: ''
				},
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#dd524d'
					}
				}, ],
				sortOptions: [{
						label: '会议名称降序',
						sidx: 'meetingname',
						value: 'meetingnamedesc',
						sort: 'desc'
					},
					{
						label: '会议名称升序',
						sidx: 'meetingname',
						value: 'meetingnameasc',
						sort: 'asc'
					},
					{
						label: '主讲人降序',
						sidx: 'meetingpeople',
						value: 'meetingpeopledesc',
						sort: 'desc'
					},
					{
						label: '主讲人升序',
						sidx: 'meetingpeople',
						value: 'meetingpeopleasc',
						sort: 'asc'
					},
					{
						label: '会议地点降序',
						sidx: 'meetingaddress',
						value: 'meetingaddressdesc',
						sort: 'desc'
					},
					{
						label: '会议地点升序',
						sidx: 'meetingaddress',
						value: 'meetingaddressasc',
						sort: 'asc'
					},
					{
						label: '参会人数降序',
						sidx: 'meetingjionpnum',
						value: 'meetingjionpnumdesc',
						sort: 'desc'
					},
					{
						label: '参会人数升序',
						sidx: 'meetingjionpnum',
						value: 'meetingjionpnumasc',
						sort: 'asc'
					},
					{
						label: '会议日期降序',
						sidx: 'meetingbeginday',
						value: 'meetingbegindaydesc',
						sort: 'desc'
					},
					{
						label: '会议日期升序',
						sidx: 'meetingbeginday',
						value: 'meetingbegindayasc',
						sort: 'asc'
					},
					{
						label: '会议开始时间降序',
						sidx: 'meetingbegintime',
						value: 'meetingbegintimedesc',
						sort: 'desc'
					},
					{
						label: '会议开始时间升序',
						sidx: 'meetingbegintime',
						value: 'meetingbegintimeasc',
						sort: 'asc'
					},
					{
						label: '会议结束时间降序',
						sidx: 'meetingendtime',
						value: 'meetingendtimedesc',
						sort: 'desc'
					},
					{
						label: '会议结束时间升序',
						sidx: 'meetingendtime',
						value: 'meetingendtimeasc',
						sort: 'asc'
					},
				],
				menuId: '',
			}
		},
		onLoad(e) {
			this.menuId = e.menuId
			uni.$on('refresh', () => {
				this.list = [];
				this.mescroll.resetUpScroll();
			})
			this.dataAll()
			this.upCallback()
		},
		onUnload() {
			uni.$off('refresh')
		},
		methods: {
			linkTo(index){
				uni.navigateTo({
					url: '/pages/apply/training/training_details/index?id='+this.list[index].id,
					fail: (err) => {
						this.$u.toast("暂无此页面")
					}
				})
			},
			
			dataAll() {},
			closeData(e) {
				if (e == 1) {
					// this.reset()
				}
			},
			upCallback(page) {
				//             for(let i in this.searchForm){
				// 	if(!this.searchForm[i]){
				// 		delete this.searchForm[i]
				// 	}
				// }
				const query = {
					currentPage: this.upOption.page.num,
					pageSize: this.upOption.page.size,
					menuId: this.menuId,
					...this.listQuery,
					...this.searchForm
				}
				request({
					url: '/api/example/Mt_safe_train/getList',
					method: 'post',
					data: query,
				}).then(res => {
				
					this.list = res.data.list
				}).catch(() => {
			
				})
			},
			handleClick(index, index1) {
				const item = this.list[index]
				request({
					url: '/api/example/Mt_safe_train/' + item.id,
					method: 'delete'
				}).then(res => {
					uni.showToast({
						title: res.msg,
						complete: () => {
							this.$u.toast(res.msg)
							this.list.splice(index, 1)
							if (!this.list.length) this.mescroll.showEmpty()
						}
					})
				})
			},
			open(index) {
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if (index != idx) this.list[idx].show = false;
				})
			},
			search() {
				if (this.isPreview == '1') return
				this.searchTimer && clearTimeout(this.searchTimer)
				this.searchTimer = setTimeout(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				}, 300)
			},
			goDetail(id, status) {
				let btnType = ''
				let btnList = []
				btnList.push('btn_edit')
				btnList.push('btn_detail')
				if (btnList.includes('btn_detail')) {
					btnType = "btn_detail"
				}
				if (btnList.includes('btn_edit')) {
					btnType = "btn_edit"
				}
				if (!btnType) return
				this.jumPage(id, status, btnType)
			},
			addPage() {
				this.jumPage()
			},
			jumPage(id, status, btnType) {
				if (!id && !status) btnType = 'btn_add'
				uni.navigateTo({
					url: id ? './form?menuId=' + this.menuId + '&jurisdictionType=' + btnType + '&id=' + id :
						'./form?menuId=' + this.menuId + '&jurisdictionType=' + btnType
				})
			},
			cellClick(item) {
				if (this.sortValue === item.value) return
				this.listQuery.sort = item.sort
				this.listQuery.sidx = item.sidx
				this.sortValue = item.value
				this.$refs.uDropdown.close();
				this.$nextTick(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				})
			},
			reset() {
				this.$refs.searchForm.resetFields()
			},
			closeDropdown() {
				this.$refs.uDropdown.close();
				this.$nextTick(() => {
					this.list = [];
					this.mescroll.resetUpScroll();
				})
			},
			dataList(data) {
				let _list = []
				for (let i = 0; i < data.list.length; i++) {
					let _data = data.list[i]
					_list.push(_data)
				}
				return _list;
			},
		},
	}
</script>

<style lang="scss">
	page {
		background-color: #f0f2f6;
		height: 100%;
		/* #ifdef MP-ALIPAY */
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		/* #endif */
		.meeting-container{
			width: calc(100% - 40rpx);
			margin: 20rpx auto 0 auto;
			min-height: calc(100vh - 600rpx);
			.meeting-card{
				width: 100%;
				background-color:#fff;
				border-radius: 16rpx;
				padding: 30rpx;
				display: flex;
				margin-bottom: 20rpx;
				.meeting-icon{
					flex-shrink: 0;
					width: 100rpx;
					height: 100rpx;
					margin-right: 20rpx;
					background: linear-gradient(180deg, #5AB0FF 0%, #2585DD 100%);
					border-radius:50%;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.meeting-message{
					h1{
						font-size: 32rpx;
						color: #333;
						font-weight: bold;
					}
					.people{
						display: flex;
						align-items: center;
						p{
							font-size: 26rpx;
							color: #797F85;
							margin-top: 15rpx;
							&:last-child{
								margin-left: 20rpx;
							}
						}
					}
					&>p{
						font-size: 26rpx;
						color: #333;
						margin:15rpx 0 ;
					}
				}
			}
		}
	}
</style>
